<script setup>
import { ref } from 'vue'
import { ElImageViewer } from 'element-plus'

const visible = ref(false)
const urls = ref()
const index = ref(0)

const open = (imageUrls, tIndex = 0) => {
    urls.value = imageUrls
    index.value = tIndex
    visible.value = true
}

const close = () => {
    visible.value = false
    urls.value = null
    index.value = 0
}

//把方法暴露给父组件
defineExpose({
    open
})
</script>

<template>
    <div>
        <el-image-viewer v-if="visible && urls" @close="close" :url-list="urls" :initial-index="index" />
    </div>
</template>

<style lang="scss" scoped>
.video {
    display: flex;
    justify-content: center;
    #video {
        width: 100%;
    }
}
</style>